// demo1
import G6 from '@antv/g6'

// 折叠图标
export const COLLAPSE_ICON = function COLLAPSE_ICON (x, y, r) {
  return [
    ['M', x - r, y - r],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x + 2 - r, y - r],
    ['L', x + r - 2, y - r]
  ]
}
// 展开图标
export const EXPAND_ICON = function EXPAND_ICON (x, y, r) {
  return [
    ['M', x - r, y - r],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x + 2 - r, y - r],
    ['L', x + r - 2, y - r],
    ['M', x, y - 2 * r + 2],
    ['L', x, y - 2]
  ]
}
// 自定义节点
G6.registerNode(
  'icon-node',
  {
    options: {
      size: [50, 30], // 节点大小宽 高
      //   节点样式配置
      style: {
        fill: 'pink', // 节点填充色
        stroke: '#ccc', // 节点描边色
        lineWidth: 1, // 节点描边粗细
        radius: 7
      }

    },
    draw (cfg, group) {
      const styles = this.getShapeStyle(cfg)
      const { labelCfg = {} } = cfg

      const w = styles.width
      const h = styles.height

      const keyShape = group.addShape('rect', {
        attrs: {
          ...styles,
          x: -w / 2,
          y: -h / 2
        }
      })
      // 添加的文字,可以添加图片在图形的下面
      group.addShape('text', {
        attrs: {
          text: '1', // 文本内容需要自定义
          x: 3,
          y: 20,
          fontSize: 10,
          textAlign: 'right',
          textBaseline: 'middle',
          fill: '#0000D9'
        },
        // must be assigned in G6 3.3 and later versions. it can be any value you want
        name: 'text-shape'
      })
      if (cfg.label) {
        group.addShape('text', {
          attrs: {
            ...labelCfg.style,
            text: cfg.label,
            x: -w / 2,
            y: h / 4
          }
        })
      }

      return keyShape
    },
    update: undefined
  },
  'rect'
)

// 自定义的边
G6.registerEdge('flow-line', {
  draw (cfg, group) {
    const startPoint = cfg.startPoint
    const endPoint = cfg.endPoint

    const { style } = cfg
    const shape = group.addShape('path', {
      attrs: {
        stroke: style.stroke,

        path: [
          ['M', startPoint.x, startPoint.y],
          ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
          ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
          ['L', endPoint.x, endPoint.y]
        ]
      }
    })

    return shape
  }
})
// 节点在默认状态下的样式配置（style）和其他配置
export const defaultNode1 = {
  type: 'icon-node',

  size: [50, 30], // 节点大小宽 高
  //   // 节点样式配置
  style: {
    fill: '#fff', // 节点填充色
    stroke: '#ccc', // 节点描边色
    lineWidth: 1, // 节点描边粗细
    radius: 7
  },
  // 节点上的标签文本配置
  labelCfg: {
    // 节点上的标签文本样式配置
    style: {
      fill: 'blue',
      fontSize: 12
    }
  },
  //   linkPoints: {
  //     bottom: true,
  //     size: 10,
  //     stroke: 'blue'

  //   },
  //   链接到节点的锚点位置
  anchorPoints: [
    [0.5, 0]
  ]
}
// 边在默认状态下的样式配置（style）和其他配置
export const defaultEdge1 = {
  type: 'flow-line',
  // 边样式配置
  style: {
    opacity: 0.6, // 边透明度
    stroke: '#ccc' // 边描边颜色
  },
  // 边上的标签文本配置
  labelCfg: {
    autoRotate: true // 边上的标签文本根据边的方向旋转
  }
}
// 默认状态
export const defaultStateStyles1 = {
  hover: {
    stroke: '#1890ff',
    lineWidth: 2
  }

}
// 布局
export const defaultLayout1 = {
  type: 'compactBox',
  direction: 'TB',
  getId: function getId (d) {
    return d.id
  },
  getHeight: function getHeight () {
    return 30
  },
  getWidth: function getWidth () {
    return 60
  },
  // 设置垂直间距
  getVGap: function getVGap () {
    return 40
  },
  // 设置水平间距
  getHGap: function getHGap () {
    return 70
  }
}

// demo2
// 节点在默认状态下的样式配置（style）和其他配置
export const defaultNode2 = {
  size: 40, // 节点大小
  // 节点样式配置
  style: {
    background: {
      fill: 'green',
      stroke: 'blue',
      padding: [3, 2, 3, 2],
      lineWidth: 3
    },
    radius: 7
  },
  // 节点上的标签文本配置
  labelCfg: {
    // 节点上的标签文本样式配置
    style: {
      fill: 'black' // 节点标签文字颜色
    }
  }
}
// 边在默认状态下的样式配置（style）和其他配置
export const defaultEdge2 = {
  // 边样式配置
  style: {
    opacity: 0.6, // 边透明度
    stroke: 'black' // 边描边颜色
  },
  // 边上的标签文本配置
  labelCfg: {
    autoRotate: true // 边上的标签文本根据边的方向旋转
  }
}
